import { Tab, Tabs, Cards, Card, Steps } from 'nextra-theme-docs';
import { toast } from 'sonner';

# Getting Started

Sonner is an opinionated toast component for React. You can read more about why and how it was built [here](https://emilkowal.ski/ui/building-a-toast-component).

<Steps>
### Install

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  <Tab>
    ```bash
    pnpm i sonner
    ```

  </Tab>
  <Tab>
    ```bash
    npm i sonner
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add sonner
    ```
  </Tab>
    <Tab>
    ```bash
    bun add sonner
    ```
  </Tab>
</Tabs>

### Add Toaster to your app

It can be placed anywhere, even in server components such as `layout.tsx`.

```tsx
import { Toaster } from 'sonner';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}
```

### Render a toast

```tsx
import { toast } from 'sonner';

function MyToast() {
  return <button onClick={() => toast('This is a sonner toast')}>Render my toast</button>;
}
```

</Steps>
